<template>
  <el-card class="content">
    <el-form inline>
      <el-form-item label="开始时间">
        <el-date-picker
          type="datetime"
          placeholder="选择开始日期"
          default-time="00:00:00"
          size="mini"
          v-model="startTime"
          :picker-options="pickerOptions0"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          type="datetime"
          placeholder="选择结束日期"
          default-time="00:00:00"
          size="mini"
          v-model="endTime"
          :picker-options="pickerOptions0"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="getStatisticalTrendOfHiddenDanger">查询</el-button>
      </el-form-item>
    </el-form>
    <p v-show="hiddenDangerTrendShow" style="text-align: center">暂无数据</p>
    <div
      id="hiddenDangerTrend"
      v-show="hiddenDangerTrendShows"
      style="height: 73vh"
    ></div>
  </el-card>
</template>

<script>
import echarts from "echarts";
import moment from "moment";
import { getStatisticalTrendOfHiddenDanger } from "../../../api/risk-dynamic-judgement";

export default {
  name: "HiddenDangerTrend",
  props: {
    node: Object,
  },
  data() {
    return {
      endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      startTime: moment().subtract(1, "months").format("YYYY-MM-DD 00:00:00"),
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      query: {
        page: 1,
        pagesize: 10,
      },
      hiddenDangerTrendShow: false,
      hiddenDangerTrendShows: true,
    };
  },
  mounted() {
    this.getStatisticalTrendOfHiddenDanger();
  },
  methods: {
    async getStatisticalTrendOfHiddenDanger() {
      var myChart = echarts.init(document.getElementById("hiddenDangerTrend"));
      myChart.showLoading();
      let queryData = {
        startTime: moment(this.startTime).format("YYYY-MM-DD 00:00:00"),
        endTime: moment(this.endTime).format("YYYY-MM-DD HH:mm:ss"),
      };
      const res = await getStatisticalTrendOfHiddenDanger({
        startTime: queryData.startTime,
        endTime: queryData.endTime,
        tailingPondId: sessionStorage.getItem("sensorId"),
      });
      if (res.resultCode == 200) {
        this.hiddenDangerTrendShow = false;
        this.hiddenDangerTrendShows = true;
        var processedList = [];
        var undisposedList = [];
        var hiddenDangerTrendName = [];
        for (let i = 0; i < res.parameter.length; i++) {
          var obj1 = new Object();
          obj1.value = res.parameter[i].processed;
          processedList[i] = obj1;
          var obj2 = new Object();
          obj2.value = res.parameter[i].undisposed;
          undisposedList[i] = obj2;
          var obj3 = new Object();
          obj3.value = res.parameter[i].name;
          hiddenDangerTrendName[i] = obj3;
        }
        let chartOption = {
          tooltip: {
            trigger: "axis",
            formatter(params) {
              let tip = params[0].name + "<br/>";
              for (let y = 0; y < params.length; y++) {
                tip +=
                  params[y].marker +
                  params[y].seriesName +
                  " : " +
                  params[y].value +
                  "件<br/>";
              }
              return tip;
            },
          },
          color: ["#66DD00", "#AAAAAA"],
          legend: {
            data: ["已处理", "未处理"],
          },
          toolbox: {
            right: "5%",
            show: true,
            feature: {
              saveAsImage: { show: true },
            },
          },
          calculable: true,
          xAxis: [
            {
              type: "category",
              data: hiddenDangerTrendName,
            },
          ],
          yAxis: [
            {
              type: "value",
              max: 20,
            },
          ],
          series: [
            {
              name: "已处理",
              type: "bar",
              data: processedList,
              // markPoint: {
              //   data: [
              //     { type: "max", name: "最大值" },
              //     { type: "min", name: "最小值" },
              //   ],
              // },
              // markLine: {
              //   data: [{ type: "average", name: "平均值" }],
              // },
              barMaxWidth : 40,
            },
            {
              name: "未处理",
              type: "bar",
              data: undisposedList,
              // markPoint: {
              //   data: [
              //     { name: "年最高", value: 182.2, xAxis: 7, yAxis: 183 },
              //     { name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 },
              //   ],
              // },
              // markLine: {
              //   data: [{ type: "average", name: "平均值" }],
              // },
              barMaxWidth : 40,
            },
          ],
        };
        myChart.hideLoading();
        myChart.setOption(chartOption, true);
        setTimeout(function () {
          window.onresize = function () {
            myChart.resize();
          };
        }, 200);
      } else {
        this.hiddenDangerTrendShow = true;
        this.hiddenDangerTrendShows = false;
      }
    },
  },
};
</script>



<style scoped>
.content {
  height: 88vh;
  margin-left: 0.07rem;
}
</style>
